require(['./config'],()=>{
    require(['template','header','footer'],(template,header)=>{  //依赖于header模块 header模块又将header.HTML中的文件给加载出来
        class Cart{
            constructor(){
                this.init();
                //如果有购物车cart数据 才算总价
                if(this.cart){
                    this.calcAllMoney()
                    this.checksChange()
                    this.setAllchoose()
                    this.allCheckChange()
                    this.addNum()
                    this.subNum()
                    this.delete()
                    this.caclallcount()
                    this.cartInputBlur()
                }
            }    

            //初始化
            init(){
                //取localStorage的数据
                const cart = localStorage.getItem('cart');
                if(cart){
                    //有数据的时候 显示con 隐藏 empty
                    $('.con').show();
                    $('.empty').hide();

                    //渲染数据  将cart(数组) 转字符串
                    this.cart = JSON.parse(cart);
                    $('.mycart-list').html(
                        template('shopcart',{
                            cart:this.cart,
                        })
                    )
                }else{
                    $('.con').hide();
                    $('.empty').show();
                    $('.wrap-mycart-top').hide();
                }

                //渲染为你推荐模块
                $.get( "http://www.xiongmaoyouxuan.com/api/tab/1?start=0",resp=>{
                    if(resp.code == 200){
                        let list = resp.data.items.list.slice(0,6);
                        
                        $('.wrap-mycart-tuijian-ul').html(template('forTuijian',{list}));
                    }
                })
                

            }

            //计算总价  reduce归并 计算总和  参数一为函数 参二为初始值0
            calcAllMoney(){
                const allMoney = this.cart.reduce((money,shop)=>{
                    //选中才计算进去
                    if(shop.check){
                        money += shop.price * shop.count
                    }
                    return money;
                },0);
                $('.totalMoney').html(allMoney.toFixed(2));
            }

            //改变某列商品的check按钮 
            checksChange(){
                const _this = this;
                $('.choose').on('change',function(){
                    //从父级的自定义属性中找到id
                    const id = $(this).parents('.mycart-list-wrap').data('id');
                    _this.cart = _this.cart.map(shop=>{
                        //判断当前这条数据是不是该改变的  取当前数据的id 可用data-id(自定义属性)
                        if(shop.id == id){//这两个数据 一个是字符串 一个是数字 三等需要转类型
                            //获取check属性 用prop  //将数据中的check属性赋值为改变后的属性
                            shop.check = $(this).prop('checked');    
                        }
                        //map后return 获取cart数据
                        return shop;
                    })
                    //将修改好的cart重新存localstorange
                    localStorage.setItem('cart',JSON.stringify(_this.cart));
                    //计算总价
                    _this.calcAllMoney();
                    //设置全选状态
                    _this.setAllchoose();

                    //重新计算已经选商品数量
                    _this.caclallcount()
                    
                })
                //点击之后 重新计算购物车数量
                header.calcCartCount();
                
            } 

            //判断是否全选  将cart遍历 看check是否都为true
            setAllchoose(){
                $('#allChoose').prop('checked',this.cart.every(shop=>shop.check));
            }

            //改变全选状态时 将所有的check按钮状态改变
            allCheckChange(){
                let _this = this;
                $('#allChoose').on('change',function(){
                    // console.log($(this).prop('checked'))
                    //遍历修改cart中的check这个字段
                         _this.cart = _this.cart.map((shop)=>{
                        shop.check = $(this).prop('checked');
                        return shop;
                    })
                    //修改成功后 重新存localstroage
                    localStorage.setItem('cart',JSON.stringify(_this.cart));
                    //计算总价
                    _this.calcAllMoney();
                    //改变每列choose的状态
                    $('.choose').prop('checked',$(this).prop('checked'));
                   
                    //重新计算已经选商品数量
                    _this.caclallcount()
                })
                
            }

            //点击添加或者减少数量事件
            addNum(){
                const _this = this;
                $('.add-btn').on('click',function(){
                    const id = $(this).parents('.mycart-list-wrap').data('id');
                    _this.cart = _this.cart.map(shop=>{
                        if(shop.id == id){
                            shop.count = parseInt(shop.count) + 1;
                            $(this).parents('.mycart-list-wrap').find('.cart-count').val(shop.count)
                            $(this).parents('.mycart-list-wrap').find('.mycart-list-wrap-pricesum-sp').html((shop.price*shop.count).toFixed(2))
                        }
                        return shop;
                    })
                    //修改好了这个数量 
                    //将修改好的cart重新存localstorange
                    localStorage.setItem('cart',JSON.stringify(_this.cart));
                    //计算总价
                    _this.calcAllMoney();


                    //点击之后 重新计算购物车数量
                    header.calcCartCount();
                    //重新计算已经选商品数量
                    _this.caclallcount()
                })

                
                
            }

            subNum(){
                const _this = this;
                $('.sub-btn').on('click',function(){
                    console.log($(this).parents('.mycart-list-wrap').find('.cart-count').val())
                    if($(this).parents('.mycart-list-wrap').find('.cart-count').val()==1){
                        return;
                    }else{
                        const id = $(this).parents('.mycart-list-wrap').data('id');
                        _this.cart = _this.cart.map(shop=>{
                            if(shop.id == id){
                                shop.count = parseInt(shop.count) - 1;
                                $(this).parents('.mycart-list-wrap').find('.cart-count').val(shop.count)
                                $(this).parents('.mycart-list-wrap').find('.mycart-list-wrap-pricesum-sp').html((shop.price*shop.count).toFixed(2))
                            }
                            return shop;
                        })
                        //修改好了这个数量 
                        //将修改好的cart重新存localstorange
                        localStorage.setItem('cart',JSON.stringify(_this.cart));
                        //计算总价
                        _this.calcAllMoney();
                    }
                    
                    //点击之后 重新计算购物车数量
                    header.calcCartCount();
                    //重新计算已经选商品数量
                    _this.caclallcount()
                })
                
            }

            //删除操作  删完了的时候 cart是个空数组 this.cart.length==0  removeitem('cart')，空数组会有问题
            delete(){
                const _this = this;
                $('.cart-del').on('click',function(){
                   
                    const id = $(this).parents('.mycart-list-wrap').data('id');
                    
                    _this.cart = _this.cart.filter(shop=>{
                        console.log(id,shop.id)
                        if(shop.id == id){
                            //找到这条数据了 然后直接删除
                            return false;
                        }
                        return shop;
                    })
                    if(_this.cart.length == 0){ //删完了
                        //清空localStorage
                        localStorage.removeItem('cart');
                        $('.con').hide();
                        $('.wrap-mycart-top').hide();
                        $('.empty').show();
                    }else{ //还没删完的情况
                        localStorage.setItem('cart',JSON.stringify(_this.cart));
                        //计算总价
                        _this.calcAllMoney();
                        //将这条数据的父元素remove
                        $(this).parents('.mycart-list-wrap').remove();

                        //点击之后 重新计算购物车数量
                        header.calcCartCount();

                        //重新计算已经选商品数量
                        _this.caclallcount()
                    }     
                })

                
            }

            //计算已经选中的总件数
            caclallcount(){
                let count = 0
                let cart = localStorage.getItem('cart');
                if(cart){
                    cart = JSON.parse(cart);
                    count = cart.reduce((num,shop)=>{
                        if(shop.check){
                            num += shop.count;
                        }
                        return num;
                    },0)
                }
                $(".yixuanshops").html(count);
            }


            //判断input框移除焦点事件
            cartInputBlur(){
                const _this = this;
                
                $('.cart-count').on('blur',function(){
                    const id = $(this).parents('.mycart-list-wrap').data('id');

                    let cartnum =parseInt($(this).val());
                    // console.log(cartnum)
                    if(cartnum <=1 ){
                        cartnum =1;
                    }
                    $(this).val(cartnum)
                    _this.cart = _this.cart.map(shop=>{
                        if(shop.id == id){
                            shop.count = cartnum
                            $(this).parents('.mycart-list-wrap').find('.cart-count').val(shop.count)
                            $(this).parents('.mycart-list-wrap').find('.mycart-list-wrap-pricesum-sp').html((shop.price*shop.count).toFixed(2))
                        }
                        return shop;
                    })
                    //修改好了这个数量 
                    //将修改好的cart重新存localstorange
                    localStorage.setItem('cart',JSON.stringify(_this.cart));
                    //计算总价
                    _this.calcAllMoney();


                    //点击之后 重新计算购物车数量
                    header.calcCartCount();
                    //重新计算已经选商品数量
                    _this.caclallcount()
                })
            }
        }
         new Cart();
    })
})